/* 
    首页展示区
*/

import React, {useEffect, useState} from 'react';
import axios from "axios";
import {
    Button
} from "antd";

import BriefCard from './BriefCard';
import EchartsCard from './EchartsCard';
import TagsCard from './TagsCard';
import axiosConfig from "../../utils/axios.config";



import './index.css';
export default function Main() {


    const [blogInfo,setBlogInfo]  = useState({
        articleNum:0,
        messageNum:0,
        visitNum:0,
        chartMessage:[

        ],
        tags:[]
    })
    const [reload,setReload] = useState(false)


    function getBlogInfo(){
        axios({
            url:'/home/getBasicInfo',
            baseURL:axiosConfig.baseURL,
            method:'GET'
        }).then(response=>{
            console.log(response.data)
            setBlogInfo(response.data)
            setReload(false)
        }).catch(err=>{
            console.log(err)
        })
    }

    function reloadInfo(){
        setReload(true)
        getBlogInfo()
    }


    useEffect(()=>{
        getBlogInfo()
    },[])
  return (
    <div className='content-main'>
      <div className="content-main-header">
        <BriefCard key='1' title={'文章数'} content={blogInfo.articleNum}/>
        <BriefCard key='2' title={'留言数'} content={blogInfo.messageNum}/>
        <BriefCard key='3' title={'访问量'} content={blogInfo.visitNum}/>
        <Button
            style={{height:'100%'}}
            type={"primary"}
            loading={reload}
            onClick={reloadInfo}
        >reload</Button>
      </div>
      <div className="content-main-data">
        <EchartsCard data={blogInfo.chartMessage}/>
        <TagsCard tags={blogInfo.tags} />
      </div>
    </div>
  )
}
